import React from 'react';
import kls from 'classnames';
import styles from './index.less';
import { Progress } from 'antd';
import { useSelector } from 'umi';

export default function Left() {
  const sectionProgress = useSelector(s => s.projectPage.sectionProgress);
  const curVideoId = useSelector(s => s.projectPage.curVideoId);
  return (
    <>
      <div className="side-panel2" style={{ top: 144, left: 24 }}>
        <div className="side-panel2-title">分项工程进度</div>
        <div
          className={kls('side-panel2-body')}
          style={{
            paddingLeft: 24,
            paddingTop: 22,
            display: 'flex',
            flexDirection: 'column',
            height: 'calc(100vh - 540px)'
          }}
        >
          <div className={styles.scrollBlock} style={{ flex: 1 }}>
            {!!sectionProgress.length &&
              sectionProgress.map(item => {
                const e = item.lastData;
                return (
                  <div className={styles.wbsSection} key={e.wbsSectionName}>
                    <div className="side-panel2-subtitle">{e.wbsSectionName}</div>
                    <div className={styles.row}>
                      <div className={styles.title}>
                        {' '}
                        总计<span>TOTAL</span>
                      </div>
                      <div className={styles.num}>
                        {' '}
                        {+e.totalProjectSectionTaskNumber}
                        <span>项</span>
                      </div>
                      <div className={styles.bar}>
                        <Progress
                          strokeLinecap="square"
                          strokeColor={'#FFFFFF'}
                          trailColor="rgba(255,255,255,0.1)"
                          percent={100}
                          showInfo={false}
                          strokeWidth={4}
                        />
                      </div>
                    </div>
                    <div className={styles.row}>
                      <div className={styles.title}>
                        已完成<span>COMPLETED</span>
                      </div>
                      <div className={styles.num} style={{ color: '#2fb0ff' }}>
                        {+e.totalActualImageProgress}
                        <span>项</span>
                      </div>
                      <div className={styles.bar}>
                        <Progress
                          strokeLinecap="square"
                          strokeColor={'#2FB0FF'}
                          trailColor="rgba(255,255,255,0.1)"
                          percent={(
                            (100 * e.totalActualImageProgress) /
                            e.totalProjectSectionTaskNumber
                          ).toFixed()}
                          showInfo={false}
                          strokeWidth={4}
                        />
                      </div>
                    </div>
                  </div>
                );
              })}
          </div>
          {curVideoId && <div style={{ width: '100%', height: 250 }} />}
        </div>
      </div>
    </>
  );
}
